<script setup>
    import { ref } from 'vue';
    import {artAddChannelsService,artEditChannelsService} from '@/api/article.js'
    const formModel=ref({
        cate_name:'',
        cate_alias:''
    })
    const rules={
        cate_name:[
            {required:true,message:'请输入分类名称',trigger:'blur'},
            {patter:/^\S{1,10}$/,message:'分类名必须是1-10位的非空字符',trigger:'blur'}
        ],
        cate_alias:[
            {required:true,message:'请输入分类别名',trigger:'blur'},
            {patter:/^[a-zA-Z0-9]{1,15}$/,message:'分类名必须是1-15位的字母或数字',trigger:'blur'}
        ]
    }
    const formRef=ref()
    const dialogVisible=ref(false)
    //   提供一个方法 
    // open({}) 如果是空的就说明是添加
    // open({id:***,name:***}) 如果是空的就说明是编辑
    const open=(row)=>{
        console.log(row);
        dialogVisible.value=true
        formModel.value={...row}
    }
    
    const emit = defineEmits('success')
    const onSubmit= async ()=>{
       await formRef.value.validate() //预校验
       const isEdit = formModel.value.id
    // 如果isEdit 是true的话就是 编辑分类
       if(isEdit){
        await artEditChannelsService(formModel.value) //编辑分类
        ElMessage.success('编辑成功') 
       }else{
        await artAddChannelsService(formModel.value) //添加分类
        ElMessage.success('添加成功')
       }
       emit('success')
       dialogVisible.value=false

    }

    // 将一个组件中的方法往外暴露 defineExpose（{}）
    defineExpose({
        open
    })
</script>
<template>
        <el-dialog v-model="dialogVisible" :title="formModel.id? '编辑分类' : '添加分类'" width="30%">

        <el-form :model="formModel" :rules="rules" ref="formRef">
            <el-form-item label="分类名称" prop="cate_name">
                <el-input v-model="formModel.cate_name" placeholder="请输入分类名称"></el-input>
            </el-form-item>

            <el-form-item label="分类别名"  prop="cate_alias">
                <el-input v-model="formModel.cate_alias" placeholder="请输入分类别名"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">
            确认
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>